<template>
  <view class="quick-actions">
    <view class="action-item" v-for="item in actions" :key="item.type" @tap="onQuickAction(item.type)">
      <image class="action-icon" :src="item.icon" mode="aspectFit"></image>
      <text class="action-text">{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup>
const actions = [
  {
    type: 'card',
    text: '电子名片',
    icon: '/static/images/icon/electronic_business_card.svg',
    url: '/pages/user/card'
  },
  {
    type: 'calendar',
    text: '人脉日历',
    icon: '/static/images/icon/calendar.svg',
    url: '/pages/contacts/calendar'
  },
  {
    type: 'message',
    text: '群发助手',
    icon: '/static/images/icon/mass_sengding.svg',
    url: '/pages/message/bulk-send'
  },
  {
    type: 'account',
    text: '人情账簿',
    icon: '/static/images/icon/gift_book.svg',
    url: '/pages/contacts/account-book'
  }
]

const onQuickAction = (type) => {
  const action = actions.find(item => item.type === type)
  if (action) {
    uni.navigateTo({ url: action.url })
  }
}
</script>

<style lang="scss" scoped>
.quick-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 40rpx;
  background: #2B7FF3;
  border-radius: 0 0 30rpx 30rpx;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  
  &:active {
    opacity: 0.8;
  }
}

.action-icon {
  width: 56rpx;
  height: 56rpx;
  margin-bottom: 12rpx;
}

.action-text {
  font-size: 24rpx;
  color: #fff;
  line-height: 1;
}
</style>